//waiting for small change


$screen_sm: 768px;
$screen_md: 1024px;
$screen_lg: 1200px;

.container{// add all per = 10
  	width: 1000px;
	margin: 0 auto;
	&::before,&::after{
		content: '';
		display: table;
		line-height: 0;
	}
	&::after{
		clear: both;
	}
	@for $i from 0 to 12{
		.pc-span#{$i+1}{
			width: 8.3333333333% * ($i+1);
			float: left;
			&::before,&::after{
				content: '';
				display: table;
				line-height: 0;
			}
			&::after{
			  	clear: both;
			}
		}
	}
	@for $i from 0 to 12{
		.pc-span-offset#{$i+1}{
			margin-left: 8.3333333333% * ($i+1);
			float: left;
		}
	}
}


@media screen and (max-width: $screen_sm){// phone
	body{
		overflow-x: hidden;
	}
	.container{
		width: 100%;
		padding-left: 9px;
		padding-right: 9px;
		&::before,&::after{
			content: '';
			display: table;
			line-height: 0;
		}
		&::after{
			clear: both;
		}
		@for $i from 1 to 13{
			.ph-span#{$i}{
				width: 8.3333333333% * $i;
				float: left;
			}
			.ph-span-offset#{$i}{
				margin-left: 8.3333333333% * ($i);
				float: left;
			}
		}
	}
}


//@media screen and (min-width: $screen_sm) { //pad
//  .container {
//    width: 750px;
//    @for $i from 0 to 12{
//		.pc-span#{$i+1}{
//			width: 8.3333333333% * ($i+1);
//			float: left;
//			&::before,&::after{
//				content: '';
//				display: table;
//				line-height: 0;
//			}
//			&::after{
//				clear: both;
//			}
//		}
//	}
//	@for $i from 0 to 12{
//		.pc-span-offset#{$i+1}{
//			margin-left: 8.3333333333% * ($i+1);
//			float: left;
//		}
//	}
//  }
//}

//@media screen and (min-width: $screen_md) { //middle PC
//  .container {
//    width: 1000px;
//    @for $i from 0 to 12{
//		.pc-span#{$i+1}{
//			width: 8.3333333333% * ($i+1);
//			float: left;
//			&::before,&::after{
//				content: '';
//				display: table;
//				line-height: 0;
//			}
//			&::after{
//				clear: both;
//			}
//		}
//	}
//	@for $i from 0 to 12{
//		.pc-span-offset#{$i+1}{
//			margin-left: 8.3333333333% * ($i+1);
//			float: left;
//		}
//	}
//  }
//}

//@media screen and (min-width: $screen_lg) { //large PC
//  .container {
//    width: 1170px;
//    @for $i from 0 to 12{
//		.pc-span#{$i+1}{
//			width: 8.3333333333% * ($i+1);
//			float: left;
//			&::before,&::after{
//				content: '';
//				display: table;
//				line-height: 0;
//			}
//			&::after{
//				clear: both;
//			}
//		}
//	}
//	@for $i from 0 to 12{
//		.pc-span-offset#{$i+1}{
//			margin-left: 8.3333333333% * ($i+1);
//			float: left;
//		}
//	}
//  }
//}









@for $i from 1 to 11{ //only for percent
	.span#{$i}{
		width: 10% * $i;
		float: left;
	}
}
